<template>
	<div id="goods_info">

		<div class="mui-scroll-wrapper" id="goods_info_scroll" style="position: absolute;top: 0;left: 0;z-index: 999">
			<div class="mui-scroll">
				<!--这里放置真实显示的DOM内容-->
				<!-- 商品轮播 -->
				<div class="ptsp_banner" id='shangpin'>
					<div id="slider" class="mui-slider">
						<div class="mui-slider-group mui-slider-loop">
							<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
							<div class="mui-slider-item mui-slider-item-duplicate">
								<img :src="$store.state.goods.last_banner">
							</div>
							<!-- 第一张 -->
							<div class="mui-slider-item" v-for="(i,k) in $store.state.goods.banner" :key="k">
								<img :src="i">
							</div>

							<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
							<div class="mui-slider-item mui-slider-item-duplicate">
								<img  :src="$store.state.goods.first_banner">
							</div>
						</div>

					</div>
					<!-- 数字角标 -->
					<!-- <div class="ptsp_pic_num">
						<span class="ptsp_pic_i">{{banner_index}}</span>
						/
						<span class="ptsp_pic_n">{{$store.state.goods.banner_num}}</span>
					</div> -->
				</div>

				<!-- 商品价格信息 -->
				<div class="ptsp_goods_info">

					<div class="goods_tag" v-for="(i,k) in $store.state.goods.goods_tag_list" :key="k">{{i.tag_name}}</div>

					<div class="title">
						{{$store.state.goods.goods_info.name}}
					</div>
					<div class="price">
						<div>
							<span class="sale_price">￥
								<span>{{$store.state.goods.goods_info.min_price}}</span>
							</span>
							<span>￥
								<span>{{$store.state.goods.goods_info.max_price}}</span>
							</span>
							<span class="fr">库存:
								<span>{{$store.state.goods.goods_info.stock}}</span>
							</span>
						</div>
						<div>
							<span>销量:
								<span>{{$store.state.goods.goods_info.sales}}</span>
							</span>
							<div class="pick_num fr">
								<!--<span @tap="cut_buy_num">-</span>-->
								<!--<span>{{$store.state.goods.buy_num}}</span>-->
								<!--<span @tap="add_buy_num">+</span>-->
							</div>
						</div>
					</div>

				</div>

        <div class="ptsp_users">
          <div class="title">正在拼团</div>
          <div class="user_info" v-for="(i,k) in $store.state.goods.goods_info.spell_list" :key="k">
            <img class="fl" :src="i.head" alt="" />
            <span class="user_name fl">{{i.nickname}}</span>
            <div class="to_join fr" @tap="to_join_group(i.id)">去参团</div>
            <div class="time fr" style="line-height: 30px">
								<span>还差{{i.num}}人成团</span>
              <br/>
              <!--<span>剩余 09:20:20</span>-->
            </div>
          </div>
        </div>
				<!-- 优惠券 -->
        <div class="hr_20"></div>
        <div class="ptsp_users ptsp_users_discount" @tap="open_discount_view">
          <div class="title">优惠券 <span style="float: right;">领取</span></div>
        </div>
        <div class="hr_20"></div>

        <div class="goods_info_nav">
          <div 
            class="goods_info_nav_item" 
            v-for="(i,k) in goods_info_nav_list" 
            :key="k"
            @tap="change_goods_info_nav(k)"
          >
            <span :class="k==goods_info_nav_index?'active':''">{{i.name}}</span>
          </div>
           
          
          
        </div>
				<!-- 商品详情 -->
				<GoodsDetail v-show="goods_info_nav_index==0" :goodsContent="$store.state.goods.goods_info.content"></GoodsDetail>
        <GoodsBuyLog v-show="goods_info_nav_index==1"></GoodsBuyLog>

			</div>
		</div>

  </div>
</template>
<script>
	import Discount from './Discount';
  import GoodsDetail from './GoodsDetail'
  import GoodsBuyLog from "./GoodsBuyLog"
	import preview from '../../../tools/plus.previewImage.js'

	export default {

		name: "goods_info",
		components: {
			Discount,
      GoodsDetail,
      GoodsBuyLog
		},
		data(){
			return{
				first_banner:'',
				last_banner:'',
        banner_index:1,
        goods_info_nav_list:[
          {
            name:'商品详情'
          },
          {
            name:'成交记录'
          }
        ],
        goods_info_nav_index:0
			}
		},
		methods:{
			add_buy_num(){
				console.log(111)
				this.$store.commit("add_buy_num")
      },
      change_goods_info_nav(k){
        this.goods_info_nav_index = k;
      },
			cut_buy_num(){
				this.$store.commit("cut_buy_num")
			},
      open_discount_view(){
			  this.$store.commit("open_discount_view",true)
      },
      to_join_group(spell_id){

        console.log("去参团")
        console.log(spell_id)
      
       this.$emit("join",spell_id)
        

      }
		},
    created(){
      console.log(this.$store.state.goods.goods_info.spell_list)
    },
		mounted: function () {
		  let that = this;
			// 初始化滚动页
			mui('#goods_info_scroll').scroll({
				deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			});
			// 初始化轮播图
			mui("#slider").slider({
				interval: 3000, //自动轮播周期，若为0则不自动播放，默认为0；
			});
			// 初始化轮播图预览
			preview('#slider img', '#slider');
      document
        .querySelector("#slider")
        .addEventListener("slide", event => {
          console.log(event.detail.slideNumber)
          that.banner_index = event.detail.slideNumber+1;
        });

		}
	};
</script>



<style lang="less" scoped>
  @import "../../../../static/pxvalue.less";
  .goods_info_nav{
    width: 100%;
    height: @p85;
    line-height: @p85;
    .goods_info_nav_item{
      float: left;
      width: 50%;
      text-align: center;
      span{
       display: inline-block;
       height: @p85;
      }
      .active{
        color: #1cb3fc;
        border-bottom: 2px solid #1cb3fc;
      }
    }
  }
  .ptsp_users_discount{
    background-color: #fff;
    line-height: @p80;
    padding: 0 @p30;
  }
	.hr_20 {
		height: @p20;
		background-color: #f6f6f6;
	}

	.ptsp_banner {
		height: @p710; // margin-top: @p40;
		position: relative;
		.ptsp_pic_num {
			width: @p92;
			height: @p40;
			font-size: @p20;
			background-color: rgba(65, 65, 65, 0.7);
			position: absolute;
			right: @p20;
			bottom: @p20;
			z-index: 10;
			text-align: center;
			color: #ffffff;
			border-radius: @p10;
			line-height: @p40;
		}
		.mui-slider-group {
			height: 100%;
		}
		.mui-slider-item {
			a {
				width: 100%;
				height: 100%;
			}
			img {
				width: 100%;
				height: 100%;
			}
		}
		#slider {
			height: 100%;
			img {
				height: 100%;
			}
		}
	}
  .position_fixed{
    position: fixed;
    top: 0;
    left: 0;
    background-color: #ccc;
    width: 100%;
    height: 100%;
    z-index: 10009;
  }
	.goods_tag {
		font-size: @p22;
		margin: 0;
		padding: 0;
		background: linear-gradient(to right, #ff6b23, #ff1610);
		display: inline-block;
		color: #fff;
		vertical-align: middle;
		padding-left: 0.2rem;
		padding-right: 0.2rem;
		border-radius: 5px; // margin-right: 0.3rem;
		transform: scale(.9);
	}

	.ptsp_goods_info {
		padding-left: @p28;
		padding-right: @p28;
		padding-top: @p20;
		background-color: #FFFFFF;
		padding-bottom: @p20;
    p{
      padding-bottom: 0 !important;
    }
		.title {
			font-size: @p32;
			color: #353535;
			margin-top: @p10;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		.info {
			width: 100%;
			img {
				width: 100%;
			}
		}
		.price {
			font-size: @p28;
			color: #888888;
			.sale_price {
				font-size: @p36;
				color: #ff0000;
				height: @p30;
			}
			.pick_num span {
				float: left;
				width: @p36;
				height: @p30;
				font-size: @p22;
				line-height: @p30;
				text-align: center;
				border: 1px solid #888888;
				border-left: none;
				border-right: none;
			}
			.pick_num span:nth-child(1) {
				border-left: 1px solid #888888;
				border-top-left-radius: 3px;
				border-bottom-left-radius: 3px;
			}
			.pick_num span:nth-child(2) {
				border: 1px solid #888888;
			}
			.pick_num span:nth-child(3) {
				border-right: 1px solid #888888;
				border-top-right-radius: 3px;
				border-bottom-right-radius: 3px;
			}
		}
		.price div:first-child {
			padding-top: @p10;
		}
		.ptsp_pintuanjia_icon {
			img {
				width: @p80;
				height: @p36;
			}
		}
	}



  body,
  html,
  .mui-content {
    font-family: "微软雅黑";
    background-color: #FFFFFF;
    padding-bottom: 6.4rem;
  }
  .fr {
    float: right;
  }
  .mui-action-back {
    height: 44px;
    width: 44px;
  }
  .mui-action-back img {
    width: 100%;
  }
  .fl {
    float: left;
  }
  .mui-bar {
    top: 0.8533rem;
    font-size: 0.7253rem;
  }
  .hr_20 {
    height: 0.4267rem;
    background-color: #f6f6f6;
  }
  .ptsp_top_stats {
    height: 22px;
    width: 100%;
    z-index: 20;
    background-color: #FFFFFF;
    position: fixed;
    top: 0;
    left: 0;
  }
  .mui-title span {
    margin-left: 0.8533rem;
    display: inline-block;
    height: 44px;
    color: #888888;
    border-bottom: 4px solid transparent;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Firefox */
    -webkit-box-sizing: border-box;
    /* Safari */
  }
  .mui-title span.ptsp_active {
    color: #353535;
    border-bottom: 4px solid #353535;
  }
  .ptsp_banner {
    height: 15.1467rem;
    position: relative;
  }
  .ptsp_banner .ptsp_pic_num {
    width: 1.9627rem;
    height: 0.8533rem;
    font-size: 0.4267rem;
    background-color: rgba(65, 65, 65, 0.7);
    position: absolute;
    right: 0.4267rem;
    bottom: 0.4267rem;
    z-index: 10;
    text-align: center;
    color: #FFFFFF;
    border-radius: 0.2133rem;
  }
  .ptsp_banner .mui-slider-group {
    height: 100%;
  }
  .ptsp_banner .mui-slider-item a {
    width: 100%;
    height: 100%;
  }
  .ptsp_banner .mui-slider-item img {
    width: 100%;
    height: 100%;
  }
  .ptsp_banner #slider {
    height: 100%;
  }
  .ptsp_banner #slider img {
    height: 100%;
  }
  .ptsp_goods_info {
    padding-left: 0.5973rem;
    padding-right: 0.5973rem;
    padding-top: 0.4267rem;
    background-color: #FFFFFF;
    padding-bottom: 0.4267rem;
  }
  .ptsp_goods_info .title {
    font-size: 0.5973rem;
    color: #353535;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .ptsp_goods_info .info {
    width: 100%;
  }
  .ptsp_goods_info .info img {
    width: 100%;
  }
  .ptsp_goods_info .price {
    font-size: 0.5973rem;
    color: #888888;
  }
  .ptsp_goods_info .price .sale_price {
    font-size: 0.768rem;
    color: #ff0000;
    height: 0.64rem;
  }
  .ptsp_goods_info .price .pick_num span {
    float: left;
    width: 0.768rem;
    height: 0.64rem;
    font-size: 0.4693rem;
    line-height: 0.64rem;
    text-align: center;
    border: 1px solid #888888;
    border-left: none;
    border-right: none;
  }
  .ptsp_goods_info .price .pick_num span:nth-child(1) {
    border-left: 1px solid #888888;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
  }
  .ptsp_goods_info .price .pick_num span:nth-child(2) {
    border: 1px solid #888888;
  }
  .ptsp_goods_info .price .pick_num span:nth-child(3) {
    border-right: 1px solid #888888;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
  }
  .ptsp_goods_info .price div:first-child {
    padding-top: 0.2133rem;
  }
  .ptsp_goods_info .ptsp_pintuanjia_icon img {
    width: 1.7067rem;
    height: 0.768rem;
  }
  .mui-scroll-wrapper {
    top: 66px;
    height: 25.6rem;
  }
  .ptsp_goods_info_img .title {
    padding: 0 0.5973rem;
    height: 1.8347rem;
    line-height: 1.8347rem;
    font-size: 0.512rem;
    text-align: center;
    border-bottom: 1px solid #ededed;
  }


  .ptsp_say .title {
    padding: 0 0.5973rem;
    height: 1.8347rem;
    line-height: 1.8347rem;
    font-size: 0.512rem;
    text-align: center;
    border-bottom: 1px solid #ededed;
  }
  .ptsp_say .user_say {
    padding: 0.5973rem;
    font-size: 0.4693rem;
    color: #353535;
    line-height: 1.024rem;
    overflow: hidden;
  }
  .ptsp_say .user_say .user_img {
    width: 1.024rem;
    height: 1.024rem;
    border-radius: 50%;
    float: left;
  }
  .ptsp_say .user_say .user_msg {
    float: left;
    margin-left: 0.4267rem;
  }
  .ptsp_say .user_say .user_msg .img_list {
    width: 100%;
    margin-top: 0.32rem;
  }
  .ptsp_say .user_say .user_msg .img_list img {
    width: 5.632rem;
    height: auto;
  }
  .ptsp_say .user_say div:first-child {
    height: 1.024rem;
  }
  .ptsp_say .user_say div:first-child span {
    line-height: 1.0667rem;
    float: left;
    margin-left: 0.4267rem;
  }

  .ptsp_users {
    background-color: #ffffff;
  }
  .ptsp_users .title {
    padding: 0 0.5973rem;
    height: 1.3867rem;
    line-height: 1.3867rem;
    font-size: 0.512rem;
    border-bottom: 1px solid #ededed;
  }
  .ptsp_users .user_info {
    height: 2.1333rem;
    background-color: #ffffff;
    padding: 0 0.5973rem;
  }
  .ptsp_users .user_info img {
    margin-top: 0.32rem;
    display: block;
    width: 1.4933rem;
    height: 1.4933rem;
    border-radius: 50%;
  }
  .ptsp_users .user_info .to_join {
    width: 2.56rem;
    height: 1.4933rem;
    margin-top: 0.32rem;
    background-image: url(../../../assets/images/ptsp/btn_bg_03.png);
    background-size: 100% 100%;
    line-height: 1.4933rem;
    text-align: center;
    font-size: 0.512rem;
    color: #FFFFFF;
  }
  .ptsp_users .user_info .time {
    text-align: right;
    margin-top: 0.4267rem;
    padding-right: 0.4267rem;
    font-size: 0.512rem;
    color: #888888;
    line-height: 0.64rem;
  }
  .ptsp_users .user_info .time span:first-child {
    color: #1c83fc;
  }
  .ptsp_users .user_info .user_name {
    margin-left: 0.64rem;
    font-size: 0.512rem;
    line-height: 2.1333rem;
    color: #353535;
  }

  .ptsp_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.24rem;
    background-color: #ffffff;
    box-shadow: 0 0 10px #aaa;
    z-index: 100;
  }
  .ptsp_footer .icon_box {
    float: left;
    width: 2.56rem;
    text-align: center;
    padding-top: 0.32rem;
  }
  .ptsp_footer .icon_box img {
    width: 1.0667rem;
  }
  .ptsp_footer .icon_box div {
    font-size: 0.4693rem;
    line-height: 0.512rem;
    color: #888888;
  }
  .ptsp_footer .buy_only,
  .ptsp_footer .buy_team {
    width: 4.2667rem;
    height: 100%;
    background: linear-gradient(to right, #77d3fd, #77b6fd);
    float: right;
    color: #FFFFFF;
    font-size: 0.512rem;
    text-align: center;
    padding-top: 0.32rem;
  }
  .ptsp_footer .buy_team {
    background: linear-gradient(to right, #1cb3fc, #1c83fc);
  }
  .ptsp_share {
    width: 1.8773rem;
    height: 1.8773rem;
    border-radius: 50%;
    background-color: #ffffff;
    position: fixed;
    box-shadow: 0 0 3px #ccc;
    right: 0.4267rem;
    bottom: 2.7733rem;
    text-align: center;
    font-size: 0.4693rem;
    z-index: 100;
    color: #1caafc;
    line-height: 0.4693rem;
  }
  .ptsp_share img {
    width: 1.0667rem;
  }
  .ptsp_confirm_goods {
    position: fixed;
    left: 0;
    bottom: 0;
    height: auto;
    width: 100%;
    z-index: 1000;
  }
  .ptsp_confirm_goods .ptsp_confirm_goods_info {
    width: 100%;
    padding-left: 0.5973rem;
    background-color: #FFFFFF;
  }
  .ptsp_confirm_goods .ptsp_confirm_goods_info i {
    position: absolute;
    top: 0.6827rem;
    right: 0.5547rem;
    font-size: 1.4933rem;
  }
  .ptsp_confirm_goods .ptsp_confirm_goods_info .goods_img {
    width: 5.4613rem;
    height: 5.4613rem;
    display: inline-block;
    border: 2px solid #FFFFFF;
    position: relative;
    top: -0.768rem;
  }
  .ptsp_confirm_goods .ptsp_confirm_goods_info .goods_img img {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
  }
  .ptsp_confirm_goods .ptsp_confirm_goods_info .price {
    display: inline-block;
    width: 6.8267rem;
    margin-left: 0.5973rem;
    position: relative;
    top: 0.4267rem;
    font-size: 0.4693rem;
  }
  .ptsp_confirm_goods .ptsp_confirm_goods_info .price .sale_price {
    font-size: 0.768rem;
  }
  .ptsp_confirm_goods .ptsp_confirm_goods_info .price span span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ptsp_confirm_goods .ptsp_confirm_goods_info .sel_color {
    width: 100%;
  }
  .ptsp_confirm_goods .ptsp_confirm_goods_info .sel_color .color_items {
    overflow: hidden;
    width: 100%;
  }
  .ptsp_confirm_goods .ptsp_confirm_goods_info .sel_color .color_items .item {
    float: left;
    width: 6.08rem;
    height: 1.4933rem;
    line-height: 1.4933rem;
    text-align: center;
    font-size: 0.512rem;
    border: 1px solid #353535;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 1.1947rem;
    margin-bottom: 0.7467rem;
    border-radius: 0.1707rem;
  }
  .ptsp_confirm_goods .ptsp_confirm_goods_info .sel_color .color_items .active {
    border: 1px solid #1c83fc;
    color: #1c83fc;
  }
  .ptsp_confirm_goods .ptsp_confirm_goods_info .sel_num {
    width: 100%;
  }
  .ptsp_confirm_goods .ptsp_confirm_goods_info .sel_num .num_btns {
    width: 100%;
    overflow: hidden;
  }
  .ptsp_confirm_goods .ptsp_confirm_goods_info .sel_num .num_btns .cut,
  .ptsp_confirm_goods .ptsp_confirm_goods_info .sel_num .num_btns .num,
  .ptsp_confirm_goods .ptsp_confirm_goods_info .sel_num .num_btns .add {
    float: left;
    text-align: center;
    color: #888888;
    height: 1.1947rem;
    line-height: 1.1947rem;
    border: 1px solid #d7d7d7;
  }
  .ptsp_confirm_goods .ptsp_confirm_goods_info .sel_num .num_btns .num {
    width: 1.6rem;
  }
  .ptsp_confirm_goods .ptsp_confirm_goods_info .sel_num .num_btns .cut {
    border-right: none;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
  }
  .ptsp_confirm_goods .ptsp_confirm_goods_info .sel_num .num_btns .add {
    border-left: none;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
  }
  .ptsp_confirm_goods .ptsp_confirm_goods_info .sel_num .num_btns .cut,
  .ptsp_confirm_goods .ptsp_confirm_goods_info .sel_num .num_btns .add {
    width: 1.7067rem;
    background-color: #f9f9f9;
  }
  .ptsp_confirm_goods .btn {
    width: 100%;
    height: 2.1333rem;
    text-align: center;
    line-height: 2.1333rem;
    color: #FFFFFF;
    background: linear-gradient(to right, #1cb5fc, #1c83fc);
  }
  .share_box {
    position: fixed;
    width: 100%;
    padding-left: 0.64rem;
    padding-right: 0.64rem;
    bottom: 0;
    left: 0;
    z-index: 1000;
    height: 4.2667rem;
    background-color: #ffffff;
  }
  .share_box .share_box_item {
    width: 25%;
    float: left;
    text-align: center;
    padding-top: 0.8533rem;
  }
  .share_box .share_box_item img {
    width: 50%;
  }
  .share_box .share_box_item div {
    font-size: 0.512rem;
  }


  .slide-fade-enter-active {
    transition: all 0.1s linear;
  }
  .slide-fade-leave-active {
    transition: all 0.1s linear;
  }
  .slide-fade-enter,
  .slide-fade-leave-to {
    transform: translateY(30px);
    opacity: 0.7;
  }


  .cout_box {
    width: 2.1333rem;
    height: 0.5973rem;
    border: 1px solid #d3d3d3;
    border-radius: 3px;
    font-size: 0.4693rem;
    line-height: 0.5973rem;
    position: absolute;
    right: 0;
    color: #888888;
    bottom: 0.2133rem;
  }
  .cout_box span {
    float: left;
    width: 33.3%;
    text-align: center;
  }
  .cout_box span:nth-child(2) {
    border-left: 1px solid #d3d3d3;
    border-right: 1px solid #d3d3d3;
  }
  .discount_box {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 999999;
    background-color: #fff;
    padding-bottom: 0.64rem;
  }
  .discount_box .title {
    text-align: center;
    font-size: 0.64rem;
    padding-top: 0.64rem;
    padding-bottom: 0.64rem;
  }
  .discount_box .discount_list .discount_item {
    position: relative;
    width: 100%;
    height: 4.4373rem;
    background-image: url(../../../assets/images/ptsp/discount2.png);
    background-size: 100% 100%;
  }
  .discount_box .discount_list .discount_item .price {
    position: absolute;
    top: 1.1947rem;
    left: 2.432rem;
    color: #1c83fc;
  }
  .discount_box .discount_list .discount_item .price .price_tag {
    font-size: 0.5973rem;
  }
  .discount_box .discount_list .discount_item .price .price_num {
    font-size: 1.28rem;
  }
  .discount_box .discount_list .discount_item .price_text {
    position: absolute;
    top: 2.6027rem;
    left: 2.432rem;
    color: #1c83fc;
    font-size: 0.64rem;
  }
  .discount_box .discount_list .discount_item .des_text {
    position: absolute;
    top: 1.3867rem;
    left: 6.5067rem;
    font-size: 0.512rem;
  }
  .discount_box .discount_list .discount_item .des_date {
    position: absolute;
    top: 2.6027rem;
    left: 6.5067rem;
    font-size: 0.4267rem;
    color: #989898;
  }
  .discount_box .discount_list .geted {
    background-image: url(../../../assets/images/ptsp/discount1.png);
  }

</style>
